<template>
	<div>
		<div class="home-nav">
			<el-row>
				<el-col :span="24">
					<el-menu :default-active="defaultActive" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
					 @select="select" background-color="#1B2D43" text-color="#fff" active-text-color="#ffd04b" unique-opened>
						<div  v-for="(item,index) in leftNav" :key="index">
							<el-submenu v-if='item.itemNav.length>0' :index="index.toString()">
							  	<template slot="title">
							  		<i class="iconfont" :class="item.icon"></i>
							  		<span>{{item.title}}</span>
							  	</template>
							  	<el-menu-item-group v-if="item.itemNav.length>0" v-for="(items,indexitems) in item.itemNav" :key="'1-'+indexitems">
							  		<el-menu-item :index="items.key"  :data_url="items.url" @click='routerLink'>{{items.title}}</el-menu-item>
							  		<!-- <el-menu-item index="1-2">{{items.title}}</el-menu-item> -->
							  	</el-menu-item-group>
							</el-submenu>
							<el-menu-item :index="item.key" v-else :data_url="item.url" @click='routerLink'>
								<i class="iconfont" :class="item.icon"></i>
								<span>首页</span>
							</el-menu-item>
						</div>
					</el-menu>
				</el-col>
			</el-row>
		</div>
	</div>
</template>
<script>
  import vuex from '../../store/index.js'
	export default {
		name: 'home-nav',
		props: ['leftMenuTrees'],
		data: function() {
			return {
				msg: 'Welcome to Your Vue.js App 钟海',
				homeNav: false,
				defaultIndex: '0',
				defaultActive: '0',
				leftNav: [{
						title: '首页',
						icon: 'icon-shouye',
						itemNav: [],
						url:'/default'
					},
					{
						title: '公司',
						icon: 'icon-gongsi',
						itemNav: [{
							title: '公司列表',
							icon: '',
							url:'/companylist'
						}, {
							title: '公司管理',
							icon: '',
							url:'/companyadmin'
						}]
					},
					{
						title: '模块',
						icon: 'icon-cedaohang-mokuai',
						itemNav: [{
							title: '一级模块',
							icon: '',
							url:'/module'
						}, {
							title: '二级模块',
							icon: '',
							url:'/moduleitem'
						},
						{
							title: '角色列表',
							icon: '',
							url:'/rolelist'
						},
						{
							title: '系统管理',
							icon: '',
							url:'/systemaccount'
						}
						]
					},
					{
						title: '会员管理',
						icon: 'icon-huiyuan',
						itemNav: [{
							title: '会员列表',
							icon: '',
							url:'/memberlist'
						}, {
							title: '会员管理',
							icon: '',
							url:'/memberadmin'
						}]
					}
				]
			}
		},
		created: function() {
			this.leftNav.map((val,key)=>{
				if(val.itemNav.length===0){
					val.key=key.toString();
				}else{
					val.itemNav.map((itemval,itemkey)=>{
						itemval.key=key+'-'+itemkey;
					});
				};
			});
			let path=this.$route.path;
			this.setDefaultIndex(path);
		},
		mounted: function() {
			
		},
		watch:{
		  '$route.path': function (newVal, oldVal) {
			  let path=newVal;
			  this.setDefaultIndex(path);
		   }
		},
		methods: {
			addDelStatus: function(index) {
				this.curId = index
			},
			handleOpen(key, keyPath) {
				//console.log(key, keyPath);
			},
			handleClose(key, keyPath) {
				//console.log(key, keyPath);
			},
			select(key, keyPath) {
				//console.log(key, keyPath);
				
			},
			leftMenuNav: function(e) {
				this.$emit('leftMenuNav', e);
			},
			routerLink(e){
				let url=e.$attrs.data_url;
				this.$router.push({path:url});
			},
			/* 根据url变化设置默认的index */
			setDefaultIndex(path){
				this.leftNav.map((val,key)=>{
					if(val.url==path){
						this.defaultActive=(val.key).toString();
						return false;
					}else{
						val.itemNav.map((itemval,itemkey)=>{
							if(itemval.url==path){
								this.defaultActive=itemval.key;
								return false;
							};
						});
					};
				});
			}
		}

	}
</script>

<style scoped>
	.home-nav {
		width: 200px;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		background-color: #1B2D43
	}

	.home-nav-right {
		left: auto;
		right: 0;
	}

	.el-scrollbar__wrap {
		overflow-x: hidden;
	}

	.el-menu-first,
	.el-menu {
		border-right: none;
	}
</style>
